<template>
  <div class="wrap-container sn-container">
    <div class="sn-content">
      <div class="sn-title">
        地区分布图
        <div class="sn-title-more">
          <a href="#">
            <img src="@/assets/img/sn-title.png"/>
          </a>
        </div>
      </div> 
      <div class="sn-body">
      <div class="wrap-container">
        <div id="global3DChart" class="global3DChart"></div>
      </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { nextTick, markRaw } from 'vue';
  import 'echarts-gl'

  export default {
    name: 'global3DEchart',
    data() {
      return {
        szbarOption: null,
        global3DOption: null
      };
    },
    mounted() {
      this.get3DOption();
      let chartSzbar = {
        id: 'global3DChart',
        chart: null,
        options: this.global3DOption
      }
      nextTick(() => {
        chartSzbar.chart = this.$echarts.init(document.getElementById(chartSzbar.id));
        chartSzbar.chart.setOption(chartSzbar.options);

      })
      window.addEventListener('resize', () => {
        chartSzbar.chart.resize()
      })

    },
    methods: {
      // 绘制3D
      get3DOption() {
        let option;
        option = {
          globe: {
            baseTexture: require("@/assets/img/global-1.jpg"),
            heightTexture: require("@/assets/img/global-1.jpg"),
            displacementScale: 0.04,
            shading: 'realistic',
            environment: require("@/assets/img/global21.jpg"),
            realisticMaterial: {
              roughness: 0.9
            },
            postEffect: {
              enable: true
            },
            light: {
              main: {
                intensity: 5,
                shadow: true
              },
              ambient: {
                intensity: 1
              }
            }
          },
          series: {
            type: 'lines3D',
            coordinateSystem: 'globe',
            blendMode: 'source-over',
            effect: {
              show: true,
            },
            lineStyle: {
              width: 1,
              color: 'rgb(255, 255,255)',
              opacity: 1,
              trailWidth: 4,
              trailLength: 0.01,
            },//3D飞线图
            data: [
              [
                [112, 40, 2],  // 终点的经纬度和海拔坐标
                [103, 25, 2], // 起点的经纬度和海拔坐标
              ],
              [
                [112, 40, 2],
                [151, -33, 1],
              ],
              [
                [112, 40, 2],
                [102, 25, 1],
              ],
              [
                [112, 40, 2],
                [121, 31, 2],
              ],
              [
                [112, 40, 2],
                [31, 30, 1],
              ],
              [
                [112, 40, 2],
                [18, -33, 1],
              ],
              [
                [112, 40, 2],
                [-122, 37, 1],
              ],
              [
                [112, 40, 2],
                [51, 0, 2],
              ],
              [
                [112, 40, 2],
                [117, 31, 2],
              ],
              [
                [112, 40, 2],
                [113, 24, 1],
              ],
              [
                [112, 40, 2],
                [103, 36, 1],
              ],
              [
                [112, 40, 2],
                [88, 42, 1],
              ],
              [
                [112, 40, 2],
                [114, 22.5, 1],
              ],
              [
                [112, 40, 2],
                [114, 30, 2],
              ],
            ]

          }
        };

        this.global3DOption = option;
      }

    }
  };
</script>

<style lang="scss" scoped>
  .sn-container {
    left: 74.5%;
    width: 25%;
    height: 100%;

    .global3DChart {
      width: 100%;
      height: 100%;
      top: 1rem;
    }
  }
</style>